import React, { Component } from 'react';
import './Collection.scss'
import { NavBar,} from 'antd-mobile'
import { good_favlist,good_unfav } from '../utils/api'
import { connect } from 'react-redux'
import { cancelCollection,request_cancelCollection } from '../store/actionCreators'
import { Toast} from 'antd-mobile'
class Collection extends Component {
    constructor(props){
        super(props)
        this.state={
            collectionList:[]
        }
    }
    componentDidMount(){
        let userid = JSON.parse(localStorage.getItem('userinfo')) ? JSON.parse(localStorage.getItem('userinfo')).userinfo.id :''
        good_favlist({userid}).then((res)=>{
            console.log(res);
            this.setState({
                collectionList:res.data.list
            },
            ()=>{
                console.log(this.state.collectionList);
            })
        })
    }
    back = ()=>{
        this.props.history.go(-1)
    }
    cancelCollection(payload){
        this.props.deletes(payload)
        // 用户id
        let userid = JSON.parse(localStorage.getItem('userinfo')).userinfo.id
        // 商品id
        let goodid = payload.id
        good_unfav({userid,goodid}).then((res)=>{
            console.log(res);
            if(res.data.code == 200){
                Toast.show({
                    icon: 'fail',
                    content: res.data.msg,
                })
            }
            this.setState({
                collectionList:this.props.collectionLists
            })
        })
    }
    render() {
        return (
            <div className='collection'>
                <NavBar onBack={this.back} className="navbar">收藏页</NavBar>
                <div className='collectionList'>
                    {
                        this.state.collectionList.map((item,index) => {
                            return (
                                <div className='collectionGood' key = {index}>
                                    <div className='imgBox'>
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className='text'>
                                        <div className='title'>
                                            {item.name}
                                        </div>
                                        <span className='oldPrice'>
                                            原价 ￥{parseInt(item.salesPrice.value)}
                                        </span>
                                        <div className='price'>
                                            <div className='activityPrice'>
                                                活动价 ￥<span>{parseInt(item.salesPrice.value)}</span>
                                            </div>
                                            <div className='btn' onClick={()=>{this.cancelCollection(item)}}>取消收藏</div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        );
    }
}
export default  connect(
    (state)=>{
        return {
            collectionLists:state.collections
        }
    },
    (dispatch)=>{
        return {
            //取消收藏 
            deletes: function(payload){
                // 异步
                // dispatch(request_cancelCollection(payload))
                // 同步
                dispatch(cancelCollection(payload))
            }
        }
    }
)(Collection)
